<template>
  <div>
    <h2 align="center">用户理财项目列表</h2>
    理财编号:<input type="text" v-model="showData.F_Id">
    理财名称:<input type="text" v-model="showData.F_Name">
    理财收益:<input type="text" v-model="showData.MinYear">
    -<input type="text" v-model="showData.MaxYear">
    <input type="button" value="查询" @click="showList()" class="btn btn-success">
    <input type="button" value="批量删除" @click="DelByIds()" class="btn btn-danger">
    <table class="table table-bordered">
      <tr>
        <td><input type="checkbox" @click="checkAll"  v-model="isSelectAll"></td>
        <td>理财编号</td>
        <td>理财产品名称</td>
        <td>年收益</td>
        <td>月收益</td>
        <td>最低金额</td>
        <td>理财人数</td>
        <td>风险等级</td>
        <td>操作</td>
      </tr>

      <tr v-for="item in list" :key="item.F_Id">
        <td>
          <input type="checkbox" v-model="item.checked" @click="changechecked(item)" >
        </td>
        <td>{{ item.F_Id }}</td>
        <td>{{ item.F_Name }}</td>
        <td>{{ item.F_Year }}</td>        
        <td>{{ ((item.F_Year/12)*100).toFixed(2) }}%</td>
        <td>{{ item.F_MinMoney.toFixed(2) }}CNY</td>
        <td>{{ item.F_Number }}人</td>
        <td>{{ item.F_Level==0?'低风险':item.F_Level==1?'中风险':'高风险' }}</td>
        <td>
          <input type="button" value="用户购买明细" @click="checkFinance(item.F_Id)" class="btn btn-danger">    
        </td>
      </tr>
    </table>
  </div>

  <div>
    <span>共{{ listcount }}条数据,每页{{ showData.pagesize }}条,当前第:{{ showData.pageindex }}/{{ pagecount }}页</span>
    <span @click=""></span>
    <input type="button" value="首页" @click="Page('home')">&nbsp;
    <input type="button" value="上一页" @click="Page('prev')">&nbsp;
    <input type="button" value="下一页" @click="Page('next')">&nbsp;
    <input type="button" value="尾页" @click="Page('end')">&nbsp;
    <select @change="showList" v-model="showData.pagesize">
      <option :value="item" v-for="item in arr ">{{ item }}条/页</option>
    </select>&nbsp;
    <input type="text" v-model="page" size="4">
    <input type="button" value="Go" @click="Page('jump')" class="btn btn-primary">&nbsp;
  </div>


</template>

<script setup lang="ts">

import {reactive,toRefs,onMounted} from 'vue';

import { useRouter } from 'vue-router';

import axios from 'axios';

//路由
let router = useRouter();

//数据
let data:any =reactive({
  list:[],
   showData:{
    F_Id:'',
    F_Name:'',
    MinYear:'',
    MaxYear:'',
    pageindex:1,
    pagesize:3
   },
   listcount:'',
   pagecount:'',
   page:1, //跳转页面
   arr:[3,5,7],//改变页容量
   isSelectAll:false,//控制全选按钮选中与不选中
   ids:[] //存储逻辑删除所用Id
})

//解构
let {list,showData,listcount,pagecount,page,arr,isSelectAll,ids} = toRefs(data);

onMounted(()=>{
  showList()
})

//理财信息列表
const showList =()=>{
  axios({
    url:'/api/Finance/GetShowFinance',
    method:'get',
    params:showData.value
  }).then((res)=>{
    console.log(res)

    res.data.data.rows.forEach((item:any)=>{
      item.checked=false
    })

    list.value=res.data.data.rows
    listcount.value=res.data.data.listcount
    pagecount.value=res.data.data.pagecount
  }).catch(err=>{
    console.log(err);
  })
}

//批量删除
const DelByIds=()=>{
  //1、判断数组中是否有值
  if(ids.value.length==0){
    return alert('请选择要删除的数据')
  }
  //2、发送请求
  let idstr = ids.value.toString();
  // axios({
  //   url:'/api/Finance/GetDelByIds',
  //   method:'get',
  //   params:{
  //     ids:idstr
  //   }
  // }).then(res=>{
  //   console.log(res.data);
  //  if(res.data.data==1){
  //     alert('删除成功')
  //     showList()
  //   }else{
  //     return alert('删除失败')
  //   }
  // }).catch(err=>{
  //   console.log(err);    
  // })
  DelByFID(idstr)
}

//全选反选
const checkAll=()=>{
  //isSelectAll的值为true是 下面的每一个复选框都为true,如果为false,那下面的复选框为false
  isSelectAll.value=!isSelectAll.value
  console.log(isSelectAll.value);

  list.value.forEach((item:any)=>{
    item.checked=isSelectAll.value
    ids.value.push(item.F_Id)
  })
}


//单个复选框选中与未选中
const changechecked =(obj:any)=>{

  //取反
  obj.checked=!obj.checked

  //every 返回值为布尔类型 如果有一件不满足就是false 都满足才是true
  let bool = list.value.every((item:any)=>{
    return item.checked==true
  })

  console.log(bool);
  
  
  isSelectAll.value=bool;
  console.log(isSelectAll.value);
  

  //如果选中了 push此ID
  if(obj.checked==true){
    ids.value.push(obj.F_Id)
    console.log(ids.value);
  }else{
    let i = ids.value.findIndex((item:any)=>{
      return item==obj.F_Id
    })
    //如果没有选中 删除此ID
    ids.value.splice(i,1)
    console.log(ids.value);
  }
}

//分页
const Page = (str:any)=>{
  if(str=='home'){
    if(showData.value.pageindex==1){
      return alert('已经是第一页了')
    }
    showData.value.pageindex=1
  }else if(str=='prev'){
    if(showData.value.pageindex<=1){
      return alert('已经是第一页了')
    }
    showData.value.pageindex--
  }else if(str=='next'){
    if(showData.value.pageindex>=pagecount.value){
      return alert('已经是最后一页了')
    }
    showData.value.pageindex++
  }else if(str=='end'){
    if(showData.value.pageindex==pagecount.value){
      return alert('已经是最后一页了')
    }
    showData.value.pageindex=pagecount.value
  }else{
    if(page.value==""){
      return alert('页码数不能为空')
    }
    if(page.value==showData.value.pageindex){
      return alert('已经在当前页了')
    }
    if(isNaN(page.value)){
      return alert('请输入数字')
    }
    if(page.value<1 || page.value>pagecount.value){
      return alert('输入的页码应在'+showData.value.pageindex+'-'+pagecount.value+'之间')
    }
    showData.value.pageindex=page.value
  }
  showList()
  page.value=showData.value.pageindex
}

//逻辑删除 --单删
const DelByFID=(F_Id:any)=>{
  if(confirm("确认删除吗？")){
    axios({
      url:'/api/Finance/GetDelByIds',
      method:'get',
      params:{
        ids:F_Id
      }
    }).then((res)=>{
      console.log(res)
      if(res.data.data==1){
        alert('删除成功')
        showList()
      }else{
        return alert('删除失败')
      }
    }).catch(err=>{
      //异常处理机制
      console.log(err);
    })
  }
}

//用户购买明细
const checkFinance =(F_Id:any)=>{
  router.push({
    path:'/main/adminbuydetail',
    query:{
      F_Id:F_Id
    }
  })
}

</script>

<style scoped>

</style>